import { createRouter, createWebHistory } from "vue-router";

import HomeView from '@/views/HomeView.vue'

let routes = [
    {
        path: '/',
        redirect: '/home/chat'
    },
    {
        path: '/home',
        name: 'home',
        component: HomeView,
        // 嵌套路由
        children: [
            {
                path: 'chat', // path前面不加/
                name: 'chat',
                component: ()=> import('@/views/chat/ChatIndex.vue')
            },{
                path: 'mine', // path前面不加/
                name: 'mine',
                component: ()=> import('@/views/mine/MineInfo.vue')
            },{
                path: 'blogs', // path前面不加/
                name: 'blogs',
                component: ()=> import('@/views/blogs/BlogViews.vue'),
                children: [
                    {
                        path: 'content/:id', // path前面不加/
                        component: ()=> import('@/views/blogs/BlogContent.vue')
                    }
                ]
            }
        ]
    },
    {
        path: '/login',
        name: 'login',
        component: ()=> import('@/views/login.vue'),
        // 嵌套路由
        // children: [
        //     {
        //         path: 'english', // path前面不加/
        //         name: 'english',
        //         component: ()=> import('@/views/EnglishView.vue')
        //     }
        // ]
    },
    {
        path: '/blog',
        name: 'blog',
        component: ()=> import('@/views/BlogView.vue'), // 路由懒加载
        // 路由参数：
        // 很多时候，我们需要将给定匹配模式的路由映射到同一个组件，根据参数展示不同的内容
        // 在vue router中，可以在路径中使用一个动态字段来实现，我们称之为路径参数，如：path: '/url/:param'
        // 在展示的组件中访问路径参数：
        // a.在选项式中 采用this.$router.params来访问，视图模板上采用$router.params来访问
        // b.在组合式中，需要import { useRoute } from 'vue-router' 
        //    js和视图模板上通过 useRoute().params来访问
        // c.还可以通过在路由规则上添加props: true,将路由参数传递给组件的props中
        children: [
            {
                path: 'content/:id',
                component: () => import('@/views/BlogContent.vue'),
                props: true // 将路径参数传递到展示组件的props
            }
        ]
    }
]

// 创建路由
const router = createRouter({
    // 使用history路由模式
    history: createWebHistory(),
    routes // 路由规则
})

// 暴露出去
export default router